<template>
    <div class="t" style="">
   <el-row>
    <el-col style="margin:20px auto;" :span="18">

        <div  style="width: 100%;height: 360px;background: #fff;display: flex;flex-direction: column;align-items: center;  border-radius: 4px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;margin-top: 40px;padding:30px 40px;box-sizing: border-box;">
            <div style="font-size: 20px;font-weight: 600;">修改密码</div>
            <div style="width: 400px;">
                <el-form :model="form" label-width="auto" style="max-width: 400px;margin-top: 40px;">
    <el-form-item label="原密码:">
      <el-input v-model="form.o" />
    </el-form-item>
    <el-form-item label="新密码:">
      <el-input v-model="form.n" />
    </el-form-item>
    <el-form-item label="确认新密码:">
      <el-input v-model="form.n1" />
    </el-form-item>
    <el-form-item>
        <div style="display: flex;width: 100%; justify-content: center;margin-top: 40px;"><el-button  type="primary" @click="onSubmit">保存</el-button>
        </div>

    </el-form-item>
  </el-form>
            </div>
        </div>
    </el-col>
  </el-row>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
import { putuser,getuserinfo } from '../../api/uesr';
const form = ref({
  o: '',
  n: '',
  n1: '',
}) as any
const init = async () => {
  let res = await getuserinfo()
  form.value = res.data
}
init()
const onSubmit = () => {


    if (!form.value.o || !form.value.n || !form.value.n1) {
      ElMessage.error('所有字段都不能为空');
        return;
      }
      if (form.value.o === form.value.n) {
        ElMessage.error('新密码和老密码不能相同');
        return;
      }
      if (form.value.n !== form.value.n1) {
        ElMessage.error('新密码和确认新密码必须相同');
        return;
      }

  delete form.value.roles
  putuser(form.value).then((res:any) => {
    if(res.code==200){
      ElMessage({
      message: '修改成功',
      grouping: true,
      type: 'success',
    })
    }

  })
}
</script>

<style scoped>
.t{
    width: 100%;height: 100%;background: #f5f5f5;
}

</style>